<link rel="stylesheet" href="../../css/goods.css">
<script src="../../script/jquery-3.6.0.min.js"></script>
<script src="../../script/api.js"></script>
<div id="items">
</div>

<script>
    const evtName = 'checkonchange';
    var items = document.getElementById('items');
    $(window).on('load',function() {
        apiready = function() {
            var goods = api.pageParam.goods;
            for (var i=0;i<goods.length;++i) {
                var check = document.createElement('input');
                check.type = 'checkbox';
                check.className = goods[i].NAME;
                check.onchange = function(ev) {
                    api.sendEvent({
                        name:evtName,
                        extra: {name:ev.target.className}
                    });
                }
                var child = document.createElement('span');
                var text = document.createTextNode(goods[i].NAME);
                var view = document.createElement('div');
                child.appendChild(text);
                view.appendChild(check);
                view.appendChild(child);
                items.appendChild(view);
            }
        }
    });
</script>